<template>
	<view>
		<nav-bar title="CCTV" backState="2000">
		</nav-bar>

		<video id="myVideo" style="width: 100%; height: 35vh;" :src="rtspUrl" @error="videoErrorCallback" loop="true" autoplay="true"
		 page-gesture controls></video>

		<view class="list-tip" @click="onTestClick">监控列表</view>
		<scroll-view class="list-view" scroll-y="true" 
			scroll-with-animation="true" :scroll-into-view="scrollIntoViewKey">
			<view v-for="(item,index) in cctvDataList"  :key="index" @click="onCCTVItemClick(item)">
				<view :id="'view-' + index" :class=" selectedListItemId == item.ID ? 'doc-item-selected ': 'doc-item'" >
					<view :class="selectedListItemId == item.ID ? 'doc-item-text_selected':'doc-item-text'">{{item.Name}}</view>
					<image class="doc-item-image" src="/static/right-arrow-gray.png" />
				</view>
				<view class="cutoff-line">
					
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getCctvTypeData,
		getCctvDataList
	} from "@/services/cctv.js";
	import CONSTS from '@/common/biz/consts.js'

	import {
		mapState,
		mapMutations
	} from 'vuex';


	export default {
		computed: {
			...mapState(['jumpToCctvCtype']),
		},
		
		data() {
			return {
				cctvTypeList: [],
				cctvDataList: [],
				isGetingCctvType: false,
				isGetingCctvData: false,
				selectedListItemId: '',

				videoContext:null,

				pageTitle: "",
				rtspUrl: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov",
				createTime: "",
				danmuList: ["呸~呸~呸~"],
				id: '',
				// cType: '',
				scrollIntoViewKey: ''
			};
		},
		
		onHide() {
			this.videoContext.pause()
			this.clearJumpToCctvCtype();
		},
		
		onShow() {
			this.checkIsSelectByExternal();
			this.videoContext.play();
		},

		methods: {
			...mapMutations(['clearJumpToCctvCtype']),
			
			onTestClick() {
				this.scrollIntoViewKey = "view-" + (Math.floor(Math.random()*10));
			},
			
			checkIsSelectByExternal(isInit) {
				if(this.jumpToCctvCtype == "") {
					if(isInit) {
						this.selectedListItemId = this.cctvDataList[0].ID;
					}
					return null;
				}
				
				let tempId = null , tempIndex = null;
				for(let i  = 0 ; i < this.cctvDataList.length ; i++) {
					if(this.cctvDataList[i].CType == this.jumpToCctvCtype){
						this.scrollIntoViewKey = "view-" + i;
						console.log("this.scrollIntoViewKey = " + this.scrollIntoViewKey )
						tempId = this.cctvDataList[i].ID;
						tempIndex = i;
					}
				}
								
				if(tempId != null)
					this.selectedListItemId = tempId;
				else if(isInit)
					this.selectedListItemId = this.cctvDataList[0].ID;
					
				if(tempIndex != null){
					console.log("tempId = " + tempId)
					console.log("tempIndex = " + tempIndex)
					
					this.scrollIntoViewKey = "view-" + tempIndex;
					console.log("scrollIntoViewKey = " + this.scrollIntoViewKey)
				}
			},
			
			getCCTVTypeList() {
				this.isGetingCctvType = true;
				this.undateWaitDialog(true);
				getCctvTypeData({}).then((res) => {
					this.isGetingCctvType = false;
					this.undateWaitDialog(false);
					if (res.code != 0) {
						uni.showToast({
							title: res.msg
						})
						return;
					}
					this.cctvTypeList = res.data;
				})
			},

			getCCTVDataList() {
				this.isGetingCctvData = true;
				this.undateWaitDialog(true);
				getCctvDataList({
					CType: 0,
					PID: 1
				}).then((res) => {
					this.isGetingCctvData = false;
					this.undateWaitDialog(false);
					if (res.code != 0) {
						uni.showToast({
							title: res.msg
						})
						return;
					}
					this.cctvDataList = res.data;
					console.log("cctv list data")
					
					setTimeout(() => {
						this.checkIsSelectByExternal(true);
					}, 500);
				})
			},

			undateWaitDialog(isShow) {
				if (!isShow) {
					if (!this.isGetingCctvData && !this.isGetingCctvType) {
						uni.hideLoading();
					}
				}
				if (isShow) {
					if (this.isGetingCctvData || this.isGetingCctvType) {
						uni.hideLoading();
					}
				}
			},

			onCCTVItemClick(item) {
				this.selectedListItemId = item.ID;
				
			}
		},

		created() {
			this.videoContext = uni.createVideoContext('myVideo');
			this.getCCTVDataList();
			
			// uni.$on('change-cctv', (e) => {
			// 	console.log("cctv on " + e.ctype)
			// 	for(let i  = 0 ; i < this.cctvDataList.length ; i++) {
			// 		if(this.cctvDataList[i].CType == e.ctype){
			// 			this.selectedListItemId = this.cctvDataList[i].ID;
			// 			return;
			// 		}
			// 	}
			// });
			
		}
	}
</script>

<style lang="scss" scoped>
	.page-root {
		background: #F8F8F8;

	}

	.list-tip {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 60upx;

	}

	.list-view {
		background: #FFFFFF;
		height: 48vh;
	}

// border: 2upx solid #327FFC;

	.doc-item {
		padding: 30upx 32upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.doc-item-selected {
		padding: 30upx 32upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border: 2upx solid #327FFC;	
	}
	
	.doc-item-text {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	
	.doc-item-text_selected {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #327FFC;
	}
	
	.doc-item-image {
		width: 36upx;
		height: 26upx;
	}
	
	.cutoff-line {
		height: 2Upx;
		margin-left: 32upx;
		background: #DDDDDD;
		box-shadow: 0px 1px 0px 0px #FFFFFF;

	}
</style>
